<template>
  <div class="min-h-screen flex flex-col bg-gray-50">
    <!-- 顶部导航栏 -->
    <nav class="bg-emerald-600 text-white shadow-md">
      <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-2">
          <i class="fas fa-leaf text-2xl"></i>
          <span class="text-xl font-bold">营养师后台管理系统</span>
        </div>
        <div class="flex items-center space-x-4">
          <a href="javascript:void(0);" class="hover:text-emerald-200 relative">
            <i class="fas fa-bell"></i>
            <span class="bg-red-500 text-white rounded-full w-5 h-5 text-xs flex items-center justify-center absolute -mt-8 ml-3">3</span>
          </a>
          <div class="relative group">
            <div class="flex items-center space-x-2 cursor-pointer">
              <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=150&h=150&q=80"
                   class="w-8 h-8 rounded-full object-cover" alt="用户头像">
              <span>管理员</span>
              <i class="fas fa-chevron-down text-xs"></i>
            </div>
            <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden group-hover:block">
              <a href="javascript:void(0);" class="block px-4 py-2 text-gray-800 hover:bg-emerald-100">
                <i class="fas fa-user mr-2"></i>个人信息
              </a>
              <a href="javascript:void(0);" class="block px-4 py-2 text-gray-800 hover:bg-emerald-100">
                <i class="fas fa-cog mr-2"></i>系统设置
              </a>
              <div class="border-t border-gray-200 my-1"></div>
              <a href="javascript:void(0);" @click="logout" class="block px-4 py-2 text-gray-800 hover:bg-emerald-100">
                <i class="fas fa-sign-out-alt mr-2"></i>退出登录
              </a>
            </div>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主要内容区 -->
    <div class="flex flex-1">
      <!-- 侧边导航 -->
      <aside class="bg-white w-64 shadow-md">
        <div class="p-4">
          <div class="relative">
            <span class="absolute inset-y-0 left-0 flex items-center pl-3">
              <i class="fas fa-search text-gray-400"></i>
            </span>
            <input type="text" 
                   class="pl-10 pr-4 py-2 w-full rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
                   placeholder="搜索...">
          </div>
        </div>
        <nav class="mt-2">
          <router-link to="/dashboard" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600" active-class="text-emerald-600 bg-emerald-50 border-l-4 border-emerald-600">
            <i class="fas fa-home mr-3"></i>
            <span>仪表盘</span>
          </router-link>
          <router-link to="/users" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600" active-class="text-emerald-600 bg-emerald-50 border-l-4 border-emerald-600">
            <i class="fas fa-users mr-3"></i>
            <span>用户管理</span>
          </router-link>
          <router-link to="/foods" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600" active-class="text-emerald-600 bg-emerald-50 border-l-4 border-emerald-600">
            <i class="fas fa-apple-alt mr-3"></i>
            <span>食物数据库</span>
          </router-link>
          <router-link to="/recipes" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600" active-class="text-emerald-600 bg-emerald-50 border-l-4 border-emerald-600">
            <i class="fas fa-utensils mr-3"></i>
            <span>食谱管理</span>
          </router-link>
          <router-link to="/diet-records" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600" active-class="text-emerald-600 bg-emerald-50 border-l-4 border-emerald-600">
            <i class="fas fa-clipboard-list mr-3"></i>
            <span>饮食记录</span>
          </router-link>
          <router-link to="/nutrition" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600" active-class="text-emerald-600 bg-emerald-50 border-l-4 border-emerald-600">
            <i class="fas fa-chart-pie mr-3"></i>
            <span>营养分析</span>
          </router-link>
          <router-link to="/settings" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600" active-class="text-emerald-600 bg-emerald-50 border-l-4 border-emerald-600">
            <i class="fas fa-cog mr-3"></i>
            <span>系统设置</span>
          </router-link>
        </nav>
      </aside>

      <!-- 主内容 -->
      <main class="flex-1 p-6">
        <h1 class="text-2xl font-bold text-gray-800">系统设置</h1>
        <p class="text-gray-600">此页面正在建设中，敬请期待！</p>
        <!-- 未来这里将是系统设置的具体内容 -->
      </main>
    </div>
  </div>
</template>

<script setup>
import { useAuthStore } from '../stores/auth'; // 导入 auth store
import { useRouter } from 'vue-router';

const authStore = useAuthStore();
const router = useRouter();

const logout = () => {
  authStore.logout();
  router.push('/login');
};

// const searchTerm = ref('');
// const debouncedSearch = () => {}; 
</script>

<style scoped>
/* 如果需要，可以在这里添加组件特定的样式 */
</style> 